<template>
  <template v-for="menu in props.menus">
    <template v-if="menu.children && menu.children.length > 0">
      <el-sub-menu
        :index="menu.path"
        :key="menu.path"
        v-if="!menu.meta?.hidden"
      >
        <template #title>
          <Icon
            :color="config.getColorVal('menuColor')"
            :name="
              menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon
            "
          />
          <span>{{ menu.meta?.title ? menu.meta?.title : "无标题" }}</span>
        </template>
        <menu-tree :menus="menu.children"></menu-tree>
      </el-sub-menu>
    </template>
    <!-- 没有后代元素的菜单 -->
    <template v-else>
      <el-menu-item
        :index="menu.path"
        :key="menu.path"
        @click="clickMenu(menu)"
        v-if="!menu.meta?.hidden"
      >
        <Icon
          :color="config.getColorVal('menuColor')"
          :name="
            menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon
          "
        />
        <span>{{ menu.meta?.title ? menu.meta?.title : "无标题" }}</span>
      </el-menu-item>
    </template>
  </template>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import { useConfig } from "@/store/config";
import { RouteRecordRaw } from "vue-router";
import { clickMenu } from "@/utils/router";
import { handleTree, handleRegionIds } from "@/utils/common";

const config = useConfig();

type Props = {
  menus: RouteRecordRaw[];
};

const props = withDefaults(defineProps<Props>(), { menus: () => [] });
onMounted(() => {
  // console.log("propsmenu", props.menus);
});
</script>
<style lang="scss" scoped>
.el-sub-menu .icon,
.el-menu-item .icon {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
}

.is-active > .icon {
  color: var(--el-menu-active-color) !important;
}

.el-menu-item.is-active {
  background-color: v-bind('config.getColorVal("menuActiveBackground")');
}
</style>
